
<template>
<div>
  <div>
    <el-input style="width: 240px" placeholder="请输入名称" v-model="params.name"></el-input>
    <el-input style="width: 240px" placeholder="请输入联系方式" v-model="params.phone"></el-input>
    <el-button type="primary"  @click="load"><i class="el-icon-search" ></i>搜索</el-button>
    <el-button type="warning"  @click="reset"><i class="el-icon-refresh" ></i>重置</el-button>
  </div>
  <el-table :data="tableData" :default-sort = "{prop: 'date', order: 'descending'}" >
    <el-table-column prop="id" label="ID" sortable width="130"></el-table-column>
    <el-table-column prop="name" label="姓名" sortable width="150"></el-table-column>
    <el-table-column prop="username" label="会员号" sortable width="150"></el-table-column>
    <el-table-column prop="age" label="年龄" sortable width="150"></el-table-column>
    <el-table-column prop="sex" label="性别" sortable width="150"></el-table-column>
    <el-table-column prop="phone" label="电话" sortable width="150"></el-table-column>

    <el-table-column prop="address" label="地址" :formatter="formatter"></el-table-column>
    <el-table-column prop="createtime" label="时间" sortable width="150"></el-table-column>
    <el-table-column label="操作">
      <template  v-slot="scope">
        <el-button type="primary" @click="$router.push('/EditUser?id='+scope.row.id)"> 编辑</el-button>
        <el-popconfirm
            style="width: 5px"
        title="您确定删除这行数据吗"
        @confirm="del(scope.row.id)"
        >
          <el-button type="danger"  slot="reference"> 删除</el-button>
      </el-popconfirm>

      </template>

    </el-table-column>
  </el-table>
  <div style="margin-top: 20px;">
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :page-size="params.pageSize"
        :curent-page="params.pageNum">
    </el-pagination>
  </div>
</div>
</template>

<script>



import request from "@/utils/request";

export default {
  name: 'User',
  data() {
    return {
      tableData: [],
      total:0,
      params :
          {
            pageNum :1,
            pageSize:10,
            name: '',
            phone: ''
          }
    }
  },
  created() {
    this.load()
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },
    load()
    {

      request.get('/user/page',{params: this.params} ).then(res => {
        // console.log(res)
        if(res.code === '200')
        {
          this.tableData= res.data.list
          this.total=res.data.total
        }
      })
    },
    reset()
    {
      this.params=
          {
            pageNum :1,
            pageSize:10,
            name: '',
            phone: ''
          }
      this.load()
    },
    del(id)
    {
      request.get("user/delete/"+id).then(res =>{
        if(res.code==="200")
        {
          this.$notify.success("删除成功")
          this.load()
        }
        else {
          this.$notify.error(res.msg)
        }
      })
    },
    handleCurrentChange(pageNum)
    {
      //点击分页按钮触发分页
      console.log(pageNum)
      this.params.pageNum=pageNum
      this.load()
    }
  }

}
</script>



<style scoped>

</style>

